<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home</title>
  <link rel="stylesheet" href="../plugins/elementui/index.css">
  <style>
    .text {
      font-size: 14px;
    }

    .item {
      padding: 18px 0;
    }

    .box-card {
      width: 480px;
      float: left;
      margin-left: 20px;
      cursor: pointer;
    }
  </style>
</head>
<body>
<div id="app">
  <el-button @click="logout()">退出登录</el-button>

  <h1>尊敬的 {{welcomeName}} 你好!</h1>

  <div style="clear: both;margin-top: 200px;">

    <el-card class="box-card" @click.native="toNumber()">
      <div class="text item">
        会员通道
      </div>
    </el-card>

    <el-card class="box-card" @click.native="toVip()">
      <div class="text item">
        vip通道
      </div>
    </el-card>
  </div>
</div>
</body>

<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<script>
  let vue = new Vue({
    el: '#app',
    data() {
      return {
        userInfo: {}
      }
    },
    created() {
      this.userInfo = JSON.parse(window.localStorage.getItem("wh_userInfo"));
      console.log(this.userInfo)
    },
    computed: {
      welcomeName() {
        let role = this.userInfo.role
        if (role === 'vip') {
          return 'vip'
        }
        if (role === 'number') {
          return '会员'
        }
        return "用户"
      }
    },
    methods: {
      logout() {
        axios.get('/user/logout').then((res) => {
          window.localStorage.removeItem("wh_userInfo")
          this.$message.success(res.data.message)
          setTimeout(() => {
            window.location.href = '../index.html'
          }, 1500)
        })
      },
      toNumber() {
        console.log(this.userInfo.role)
        if (this.userInfo.role === 'number' || this.userInfo.role === 'vip') {
          window.location.href = 'number.html'
        } else {
          this.$message({
            message: '权限不足, 请及时充值',
            type: 'warning'
          });
        }
      },
      toVip() {
        if (this.userInfo.role === 'vip') {
          window.location.href = 'vip.html';
        } else {
          this.$message({
            message: '权限不足, 请及时升级为vip',
            type: 'warning'
          });
        }
      }
    }
  })

</script>
</html>